<template>
    <el-container>
        <el-main class="p-0 min-w-[1200px]">
            <el-header class="layout-header">
                <layoutHeader />
            </el-header>
            <div class="layout-container" v-if="!route.meta.auth">
                <div class="content">
                    <slot></slot>
                </div>
                <layoutSideBar />
            </div>
            <div v-else class="user-container">
                <layoutMenu />
                <div class="content">
                    <slot></slot>
                </div>
            </div>
            <layoutFooter />
        </el-main>
    </el-container>
</template>

<script lang="ts" setup>
import layoutHeader from "./components/header/index.vue";
import layoutFooter from "./components/footer/index.vue";
import layoutSideBar from "./components/sideBar/index.vue";
import layoutMenu from "./components/menu/index.vue";
const route = useRoute();
</script>

<style lang="scss" scoped>
.layout-container {
    width: 100%;
    margin: 70px auto 10px auto;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    min-height: calc(100vh - 190px);

    .content {
        width: 100%;
        max-width: 820px;
        background: #fff;
        box-shadow: 0 0 20px rgb(210 211 216 / 30%);
        border-radius: 5px;
    }

    .side-bar {
        width: 385px;
        border-radius: 5px;
        padding: 20px;
        margin-left: 10px;
        box-shadow: 0 0 20px rgb(210 211 216 / 30%);
        background: #fff;
    }
}

.user-container {
    width: 100%;
    margin: 70px auto 10px auto;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    min-height: calc(100vh - 190px);

    .content {
        width: 100%;
        max-width: 990px;
        background: #fff;
        box-shadow: 0 0 20px rgb(210 211 216 / 30%);
        border-radius: 5px;
    }

    .side-menu {
        width: 200px;
        border-radius: 5px;
        padding: 20px;
        box-shadow: 0 0 20px rgb(210 211 216 / 30%);
        background: #fff;
    }
}

.layout-header {
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
    box-shadow: 0 0 20px rgb(210 211 216 / 30%);
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.el-header {
    --el-header-padding: 0;
}

.el-main {
    --el-main-padding: 0;
}
</style>
